@extends("backend.layout.main")


@section("right_content")
    <!--middle-->
    <div class="mainWrapBox">
        <div class="mainBox">
			
		<h1>面积效绩设置</h1>
		<div class="html">
		<div class="w220 f_l">
			@include('backend.layout.comset')
		</div>
		<div class="auto-width-220">
			<style>
				.outlay-table{table-layout:fixed;}
				.outlay-table th,.outlay-table td{	text-align: center;	border:1px solid #ccc;height: 40px;}
				#add-area {float: right;	margin: 3px 3px 0 0;}
				.add-area {height: 35px;}
				td .ratio,th .ratio{cursor: pointer;}
				.outlay-table td p {height: 20px;cursor: pointer;}
				.invalid:-moz-placeholder { color: red;}
				.invalid::-moz-placeholder {color: red;}
				input.invalid:-ms-input-placeholder{color: red;}
				input.invalid::-webkit-input-placeholder {color: red;}
				.red{color:red;border:none;}

			</style>
				<div style="background: #fff;padding: 10px;" class="mt10";>
					<div class="add-area"><button id="add-area" type="button" class="btn green add-area">添加面积</button></div>
					<table class="outlay-table" width="100%">
						<thead>
						<tr class="th">
							<th></th>
							@foreach($area as $a)
							<th>
								<span class="ratio" onclick="editarea({{$a['area_id']}},{{$a['area_start']}}, {{$a['area_end']}})">{{$a['area_start']}}-{{$a['area_end']}}</span>
							</th>
							@endforeach
							<!--<th>0-100</th>
							<th>100-200</th>
							<th>200-400</th>
							<th>400-600</th>
							<th>400-600</th>
							<th>600-800</th>
							<th>800-1000</th>-->			
						</tr>
						</thead>
						<tbody>
							@foreach($task as $k => $t)
								<tr class="td">
									<td>{{$t['task_name']}}</td>
									@foreach($t['rate'] as $kk => $tt)
									<td>
										<span class="ratio" onclick="editDetailData(this);">	
											<span class="{{$tt['class']}}">{{$tt['percent']}}</span>
											<input type="text" class="width80 hide" data-id="{{$tt['ratio_id']}}" name="child-cost-name" onblur="saveDetailData(this);">
										</span>
									</td>
									@endforeach
								</tr>
							@endforeach
						</tbody>
					</table>
				</div> 
				  <div class="modal" id="input-area" style="display:none;width:520px;">
							 <div class="modal-content">
							 <div class="modal-header" style="padding: 4px;">
								 <span class="modal-title"><em style="font-weight: bold">添加/修改面积</em> </span>
								 <input type="hidden" name="area_id" id="area_id" value=""/>
							 </div>
							 <div class="inarea" style="text-align: center;margin:10px 0">
							 
							  <input id="inarea1" type="text" placeholder="请输入面积">--<input id="inarea2" type="text" placeholder="请输入面积">            	
							 </div>

							 </div>
							 <div class="modal-footer" style="display:block;">
								<a id="savearea" class="btn green">提交</a>
							 </div>
				  </div>
		</div>
	</div>
  
    </div>
</div>
<script src="/backend/js/jquery.hDialog.min.js"></script>
<script type="text/javascript">
function saveDetailData(obj) {
        
		var text=$(obj).val();
		var ratio_id = $(obj).attr('data-id');
		
		if(!(/^0(\.\d{1,2})?$/.test(text)) ){
			alert('必须是小数');
			return false;
			
		}
		
		if(text == '0.00'){
			$(obj).addClass('hide');
			$(obj).prev().html(text).removeClass('hide');
			return false;
		}
		
		$.post('/backend/performance/addartio',{'ratio_id':ratio_id, 'percent':text}, function(d){
			if(d == 1){
				$(obj).addClass('hide');
				$(obj).prev().html(text).removeClass();
			}else{
				alert('更新失败');
			}
			
		})  
} 

function editDetailData(obj) {
    var text=$(obj).children().eq(0).html();
    $(obj).children().eq(1).val(text).removeClass('hide');
    $(obj).children().eq(0).addClass('hide');
    $(obj).children().eq(1).focus();
}

$(function(){
	
	$('#add-area').click(function(){
		$('#input-area #area_id').val(0);
	})
	// 添加面积值判断
	$('.inarea input:first').blur(function(){
		if(!(/^\d+(.\d{1,2})?$/.test($(this).val())||$(this).val()=='')){
			$(this).val('').addClass('invalid').attr('placeholder','必须是数字'); 		
		}else if(($(this).next().val()!='')&&(parseFloat( $(this).val())>parseFloat($(this).next().val())   )){
			$(this).val('').addClass('invalid').attr('placeholder','输入小于'+$(this).next().val()+'的数');
		}

	})

	$('.inarea input:last').blur(function(){
		if(!(/^\d+(.\d{1,2})?$/.test($(this).val())||$(this).val()=='')){
			$(this).val('').addClass('invalid').attr('placeholder','必须是数字');   
		}else if(($(this).prev().val()!='')&&(parseFloat( $(this).val())<parseFloat($(this).prev().val())  )){
			$(this).val('').addClass('invalid').attr('placeholder','输入大于'+$(this).prev().val()+'的数');
		}

	})
	
})
function editarea(area_id, area_start, area_end){
	
	$('#add-area').trigger("click");
	$('#input-area #area_id').val(area_id);
	$('#input-area #inarea1').val(area_start);
	$('#input-area #inarea2').val(area_end);
}
$('#savearea').click(function(){
    var area1  = $.trim($('#inarea1').val());
    var area2  = $.trim($('#inarea2').val());
    var area_id  = $('#area_id').val();
	var _token = "{{ csrf_token() }}";
	
	if(area1 == '' || area2 ==''){
		alert('请输入');
		return false;
	} 
	
	$.post('/backend/performance', {'area_id':area_id, 'area_start':area1, 'area_end':area2, '_token':_token}, function(){
		
		window.location.reload();
	})
	
})
    function openinputarea(obj) {
    $(obj).hDialog({
    box: '#input-area',
    width:400,
    height:130,
    positions: 'center',
   
    modalHide: true,
    closeBg: '#fff',
    beforeShow:function(){

    }
  });
}
openinputarea('#add-area');
</script>
@endsection
